<template>
    <div class="tyo-y">
   
        <van-nav-bar
        title="云相册"
        left-arrow
        @click-left="onClickLeft"
      />
    
    
     <p class="time-y">2018/11/11 11:11</p>
      
    <div class="bos-y">
      <img :src="item" v-for='(item,i) in list' :key="i" @click='tap($event)'>
    </div>

    <div class="xian-y" v-if="seen" @click.stop="xian()">
       <router-view @click.native="todo()"></router-view>
    </div>
   
</div>
</template>

<script>
export default {
name:'Cloudphoto',
data(){
  return{
    list:[
      'https://img.yzcdn.cn/vant/cat.jpeg',
      'https://img.yzcdn.cn/vant/cat.jpeg',
      'https://img.yzcdn.cn/vant/cat.jpeg',
      'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561539636412&di=080eec4572ce1eef85f9154ae7dc1c65&imgtype=0&src=http%3A%2F%2Fpic13.nipic.com%2F20110409%2F7119492_114440620000_2.jpg',
      'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561539658109&di=5919b06805e670cde2f64672c1cfc260&imgtype=0&src=http%3A%2F%2Fphotocdn.sohu.com%2F20150625%2FImg415612078.jpg'
    ],
    seen:false
    
  }
},

methods: {
       onClickLeft() {
        this.$router.go(-1) 
       },
       tap(e){
       this.seen =! this.seen
       },
       xian(){
         this.seen =! this.seen
       },
       todo(){
         this.$router.push('/imgdetails')
       }
   }
}
</script>

<style scoped>
.tyo-y{
  position: relative;
  min-height:100%
}
.time-y{
  font-size: 14px;
  margin-left:8px;
  color: #ccc;
  line-height: 16px;
}
.bos-y{
  display: flex;
  flex-wrap: wrap;
}
.bos-y img{
  width:169px;
  min-height: 50px;
  max-height:300px;
  margin: 5px 8px;
  border-radius: 8px;
  z-index:9
}
.xian-y{
  position:absolute;
  width:100%;
  min-height:100%;
  z-index:9999;
  top:0;
  left:0
}
</style>